

.tab-content li{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px;
}

.tab-content p{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px;
}

.tab-content h1{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px;
}

.tab-content h2{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px;
}

.tab-content h3{ /* This insures that there's enough space between your paragraphs, headings, etc */
    margin-bottom: 10px;
}
.span-title{
	text-decoration:none; 
	color:#3FA9FF;
}

span:hover{
	color:#8FD7FF;
}

.tab-container h3{ /* Effects only the h3 headings inside the tabs */
	font-size:147%;
}
/* `Containers
----------------------------------------------------------------------------------------------------*/

#navigation-container{ /* Use this to position the entire tab module */
	margin:0 auto; 
	width:580px; 
	margin-top:4%;
}

/* `Common Styles
----------------------------------------------------------------------------------------------------*/

/* Tabs */
	
.tab-container {
	position: relative; /* It's important to keep this position relative and the absolute positions in this file the same */
	width: 100%; 
	z-index:0;
}

.tab-container > div { 
	display: inline-block; 
}

html>body .tab-container > div { *display:inline;} /** This is an unfortunate CSS hack to get IE7 to play nice.  Only IE7 can read it **/

.tab-container > div > span {  
	position: relative !important; /* Keeps the tabs in line with each other */
	text-decoration: none; 
	color: #E7E7E7; 
	background: #333333; 
	display: inline-block;
	padding: 4px 14px; 
	border: 1px solid #ccc; 
	font-size:16px;
	margin:2px;
}

.tab-container > div:not(:target) > span {
}	

.tab-container > div:target > span { 
	background:#000000;
}	

.tab-container > div > div { /* This is the container which holds the tab content */
	background: #E7E7E7; 
	z-index: -2;
	top: 50px;
	padding: 20px;
	border: 1px solid #ccc; 
	min-height:200px; /* Change this value if you need more or less content space */
	position:absolute; /* Fixes IE 7 & 8 */
	background: -moz-linear-gradient(top, #FFFAEE, #FFFAEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFAEE), to(#FFFAEE));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #C3732E;
    -webkit-box-shadow: 2px 3px 10px #FFFAEE;
}	
.tab-container > div:not(:target) > div { 
	position: absolute; /* This keeps the tab module contained */
}

.tab-container > div:target > div { 
	position: absolute; 
	z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */ 
}

.tab-container > div.tab-content{ /* Styles the inner content of the tabs */
	padding-bottom: 70px;
    padding-left: 20px;
    padding-right: 20px;
}
	
.tab-content img{ 
	margin:0 auto; 
	display:block; 
	padding-bottom: 20px;
    padding-top: 10px;
}


/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/



/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
}

/*
	The following zoom:1 rule is specifically for IE6 + IE7.
	Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
	zoom: 1;
}